<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 阻止单击事件继续冒泡 -->
        <div @click="parentDoThis">
            <a @click.stop="sonDoThis">阻止事件冒泡</a>
        </div>

        <!-- 提交事件不再重载页面 -->
        <form @submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <div @click="parentDoThis" style="padding:5px;background-color:green;">
            <a @click.stop.prevent="sonDoThis" href="http://www.baidu.com">百度外卖</a>
        </div>

        <!-- 只有修饰符 -->
        <form @submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div @click.capture="parentDoThis" style="padding:5px;background-color:green;">
            <a @click="sonDoThis">劳资是儿子</a>
        </div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div @click.self="parentDoThis" style="padding:5px;background-color:yellow;">
            <a>劳资是儿子</a>
        </div>

        <!-- 点击事件将只会触发一次 -->
        <a @click.once="sonDoThis">爱就一个字我只曰一次</a>

    </div>

    <script>
        const app = {
            methods: {
                parentDoThis() {
                    console.log("parentDoThis");
                },
                sonDoThis() {
                    console.log("sonDoThis");
                }
            }
        }
        Vue.createApp(app).mount("#app")
    </script>
</body>

</html>